<template>
  <div class="chart-content-wrapper" @mouseenter="mouseenter()" @mouseleave="mouseleave">
    <top-filter :title="title" ref="topFilter">
      <SingleCheck @singleCheck="singleCheck" :nameList="nameList"></SingleCheck>
      <double-check-filter @confirmDoubleSelect="confirmSingleSelectPlanArea" defaultText="统筹区" :filter="filterN"
                           type="planArea" :isParentLinkChild="true"></double-check-filter>
      <group-list-filter :maxSelectHosNum="3" :defaultText="'医院等级'" :filter="filterN" :type="'detailHospital'"
                         @confirmDoubleSelect="confirmDoubleSelectDetailHospital" :isThreeBrokenLine="true">
      </group-list-filter>
    </top-filter>
    <div class="chart-container" v-show="isShowChart">
      <div id="inHosNumAnalyseChartsId" class="chart-type1"></div>
      <summarize :showSummarizeText="conclusion"></summarize>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import SingleCheck from '../../last/filter/single-check'
  import {setChartHeight, loadingOpt} from '../../../assets/js/utils.js'
  import SingleListFilterWithoutCb from '../filter/single-list-filter-without-checkbox.vue'
  import GroupListFilter from '../filter/group-list-filter.vue'
  import DoubleCheckFilter from '../filter/double-check-filter.vue'
  import TopFilter from '../filter/top-filter1.vue'
  import Summarize from '../summarize/summarize.vue'
  import {getYearAverageInHosDaysData} from '../../../api/last-api'
  import {brokenLineChartOption} from '../../common/mixin'
  import {getYaxisMaxMin} from './utils/mathUtils'
  import {
    getDefaultAreaCode
  } from './utils/dataUtils'
  export default {
    props: ['isChange', 'filter'],
    watch: {
      isChange(){
        setTimeout(() => {
          this.myChart.resize();
        }, 101)
      }
    },
    created() {
    },
    components: {
      SingleListFilterWithoutCb,
      GroupListFilter,
      DoubleCheckFilter,
      TopFilter,
      Summarize,
      SingleCheck
    },
    data () {
      return {
        nameList: ['人均', '次均'],
        isShowChart: true,
        filterN: JSON.parse(JSON.stringify(this.filter)),
        itemStyle: {
          height: '300px'
        },
        title: '',
        conclusion: '',
        chartOptions: JSON.parse(JSON.stringify(brokenLineChartOption)),
        planAreaId: getDefaultAreaCode(this.filter).join(','),
        hospitalId: '1,2,3',
        type: '1'
      }
    },
    mounted(){
      setChartHeight()
      this.myChart = this.$echarts.init(document.getElementById('inHosNumAnalyseChartsId'), null, {renderer: 'canvas'})
      this.getYearAverageInHosDaysData()
//      this.setDataIntoCharts(require('./test/avgInHosDay.json').data)
    },
    methods: {
      singleCheck(type){
        console.log(type)
        if (type == 1) {
          this.type = 1
        } else {
          this.type = 2
        }
        this.getYearAverageInHosDaysData();
      },
      drawYearAverageInHosDaysCharts(){
        this.myChart.setOption(this.chartOptions);
      },
      confirmSingleSelectPlanArea(filter){
        this.planAreaId = filter.join(',')
        this.getYearAverageInHosDaysData()
      },
      confirmDoubleSelectDetailHospital(filter) {
        this.hospitalId = filter.join(',')
        this.getYearAverageInHosDaysData()
      },
      getYearAverageInHosDaysData() {
        if (this.timer) {
          clearTimeout(this.timer)
        }
        this.timer = setTimeout(() => {
          this.myChart.clear();
          this.myChart.showLoading(loadingOpt)
          // 获取平均住院日综合分析数据
          getYearAverageInHosDaysData(this.planAreaId, this.hospitalId, this.type).then(response => {
            this.myChart.hideLoading();
            if (response.code == 0) {
              this.isShowChart = true;
              this.setDataIntoCharts(response.data)
            } else {
              this.isShowChart = false;
            }
          }).catch(err => {
            this.isShowChart = false;
          })
        }, 300)
      },
      setDataIntoCharts(response) {
        // 设置顶部的标题
        this.title = response.reportName
        // 设置结论
        this.conclusion = response.conclusion
        // 清空底部标识的data数据
        this.chartOptions.legend.data = []
        // 清空X轴线上面的年份数据，取第一条数据的年份
        this.chartOptions.xAxis[0].data = []
        // 清空Y轴线上面的对应金额数据
        this.chartOptions.series = []

        let threeArray = []
        response.arrayVo.forEach((item, index) => {
          // 拼接数组
          item.avgDay.forEach((item) => {
            threeArray.push(item)
          })

          if (index == 0) {
            this.chartOptions.xAxis[0].data = item.year
          }
          this.chartOptions.legend.data.push(item.hospitalName)

          // 区分颜色
          let lineColor = '#fff'
          if (index == 0) {
            lineColor = '#FF659D'
          } else if (index == 1) {
            lineColor = '#15A0F1'
          } else if (index == 2) {
            lineColor = '#5FFFDA'
          }
          this.chartOptions.series.push({
            name: item.hospitalName,
            type: 'line',
            data: item.avgDay,
            symbolSize: 10,
            symbol: 'circle',
            showSymbol: true,
            color: lineColor,
            lineStyle: {
              normal: {
                color: lineColor
              }
            },
            label: {
              normal: {
                show: true,
                position: 'top',
                fontSize: 12,
                color: lineColor
              }
            },
            markPoint: {
//                data : [
//                  {type : 'max', name: '最大值'},
//                  {type : 'min', name: '最小值'}
//                ]
            },
            markLine: {
//                data : [
//                  {type : 'average', name: '平均值'}
//                ]
            }
          })
        })
        let maxMin = getYaxisMaxMin(threeArray)
        this.chartOptions.yAxis[0].max = maxMin.Ymax
        this.chartOptions.yAxis[0].min = (maxMin.Ymin < 0 ? 0 : maxMin.Ymin)
        this.drawYearAverageInHosDaysCharts()
      },
      mouseenter(){
        this.$refs.topFilter._hideChartTitle()
      },
      mouseleave() {
        this.$refs.topFilter._showChartTitle()
      }
    }
  };
</script>

<style>
  @import "../../../assets/css/last-charts.css";
</style>
